<template>
  <div class="main-content">
    <!-- 轮播图区域 -->
    <el-carousel height="400px" class="hero-carousel">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div class="carousel-item" :style="{ backgroundImage: `url(${item.imageUrl})` }">
          <div class="carousel-content">
            <h1>{{ item.title }}</h1>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 快速导航 -->
    <el-row :gutter="20" class="quick-nav">
      <el-col :span="6" v-for="nav in quickNavs" :key="nav.path">
        <RouterLink :to="nav.path">
          <el-card shadow="hover" class="nav-card">
            <div class="nav-item">
              <el-icon :size="40" :color="nav.color">
                <component :is="nav.icon" />
              </el-icon>
              <h3>{{ nav.title }}</h3>
              <p>{{ nav.description }}</p>
            </div>
          </el-card>
        </RouterLink>
      </el-col>
    </el-row>

    <!-- 找工作模块 -->
    <el-card class="section-card">
      <template #header>
        <div class="section-header">
          <h2>热门职位</h2>
          <RouterLink to="/zhaopin">
            <el-button type="text">
              <span>查看更多</span>
              <el-icon> <DArrowRight /></el-icon>
            </el-button>
          </RouterLink>
        </div>
      </template>
      <el-row :gutter="16">
        <el-col :span="8" v-for="job in jobs" :key="job.id">
          <RouterLink :to="`/zhaopin/detail?id=${job.id}`">
            <el-card shadow="hover" class="job-card">
              <div class="job-info">
                <h4>{{ job.title }}</h4>
                <p class="company" v-if="job.phoneNumbers">{{ job.phoneNumbers }}</p>
                <div class="job-details">
                  <el-tag>
                    <span v-if="job.minSalary > 0">{{ formatSalary(job.minSalary) }} - </span>
                    <span v-if="job.maxSalary > 0">{{ formatSalary(job.maxSalary) }}</span>
                    <div v-else>面议</div>
                  </el-tag>
                  <el-tag type="info">{{ job.location }}</el-tag>
                  <template v-for="(tag, idx) in JSON.parse(job.tagsJson)" :key="idx">
                    <el-tag type="info">{{ tag }}</el-tag>
                  </template>
                </div>
                <p class="job-desc">{{ job.requirements }}</p>
              </div>
            </el-card>
          </RouterLink>
        </el-col>
      </el-row>
    </el-card>

    <!-- 特产模块 -->
    <el-card class="section-card">
      <template #header>
        <div class="section-header">
          <h2>地方特产</h2>
          <RouterLink to="/product">
            <el-button type="text"
              >查看更多 <el-icon> <DArrowRight /></el-icon
            ></el-button>
          </RouterLink>
        </div>
      </template>
      <el-row :gutter="16">
        <el-col :span="6" v-for="product in products" :key="product.id">
          <RouterLink :to="`/product/detail?id=${product.id}`">
            <el-card shadow="hover" class="product-card">
              <img :src="product.image" :alt="product.name" class="product-image" />
              <div class="product-info">
                <h4>{{ product.name }}</h4>
                <p class="price">¥{{ product.price }}</p>
                <el-rate v-model="product.rating" disabled show-score></el-rate>
                <el-button type="primary" size="small" class="buy-btn">立即购买</el-button>
              </div>
            </el-card>
          </RouterLink>
        </el-col>
      </el-row>
    </el-card>

    <!-- 景点模块 -->
    <el-card class="section-card">
      <template #header>
        <div class="section-header">
          <h2>热门景点</h2>
          <RouterLink to="/scene">
            <el-button type="text"
              >查看更多 <el-icon> <DArrowRight /></el-icon
            ></el-button>
          </RouterLink>
        </div>
      </template>
      <el-row :gutter="16">
        <el-col :span="8" v-for="attraction in attractions" :key="attraction.id">
          <RouterLink :to="`/scene/detail?id=${attraction.id}`">
            <el-card shadow="hover" class="attraction-card">
              <img :src="attraction.image" :alt="attraction.name" class="attraction-image" />
              <div class="attraction-info">
                <h4>{{ attraction.name }}</h4>
                <p class="location">{{ attraction.location }}</p>
                <el-rate v-model="attraction.rating" disabled show-score></el-rate>
                <p class="description">{{ attraction.description.substring(0x00, 100) }} <span v-if="attraction.description.length > 100">...</span></p>
                <el-button type="primary" size="small">查看详情</el-button>
              </div>
            </el-card>
          </RouterLink>
        </el-col>
      </el-row>
    </el-card>

    <!-- 商家模块 -->
    <el-card class="section-card">
      <template #header>
        <div class="section-header">
          <h2>推荐商家</h2>
          <RouterLink to="/shop">
            <el-button type="text"
              >查看更多
              <el-icon> <DArrowRight /></el-icon>
            </el-button>
          </RouterLink>
        </div>
      </template>
      <el-row :gutter="16">
        <el-col :span="6" v-for="merchant in merchants" :key="merchant.id">
          <RouterLink :to="`/shop/detail?id=${merchant.id}`">
            <el-card shadow="hover" class="merchant-card">
              <img :src="merchant.image" :alt="merchant.name" class="merchant-image" />
              <div class="merchant-info">
                <h4>{{ merchant.name }}</h4>
                <p class="category">{{ merchant.category }}</p>
                <el-rate v-model="merchant.rating" disabled show-score></el-rate>
                <p class="address">{{ merchant.address }}</p>
                <div class="merchant-actions">
                  <el-button size="small">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </RouterLink>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, shallowRef, onMounted } from 'vue'
import { ShoppingBag, Promotion, DArrowRight, Camera, Shop } from '@element-plus/icons-vue'
import { useHead } from '@vueuse/head'
import { useRouter } from 'vue-router'
import http from '@/apis/banner'
import { fetchList as zhaopinList } from '@/apis/zhaopin'
import { fetchList as productList } from '@/apis/product'
import { fetchList as sceneList } from '@/apis/scene'
import { fetchList as shopList } from '@/apis/shop'
/*

我爱东川对东川文化，东川旅游，东川生活,东川天气预报,东川信息,东川天气,东川交通违章查询,机动车辆违章查询,东川邮编区号,学校查询等等介绍
东川文化，东川旅游，东川生活,东川信息,东川天气预报,东川天气,东川二手车,东川二手房,东川租房,东川房产网,东川人才,东川招聘,东川学校,东川地图,东川邮编,东川区号,东川医院，爱东川，我爱东川
*/
useHead({
  title: '东川区地方门户网站',
  meta: [
    {
      name: 'description',
      content: '提供在东川找工作、东川旅游,东川生活,东川信息,买特产、游景点、找商家等一站式本地生活服务'
    },
    {
      name: 'keywords',
      content: '东川本地生活,东川区门户,东川找工作,东川特产,东川景点,东川商家,东川文化，东川旅游，东川生活,东川信息,东川天气预报,东川天气,东川二手车,东川二手房,东川租房,东川房产网,东川人才,东川招聘,东川学校,东川地图,东川邮编,东川区号,东川医院，爱东川，我爱东川'
    }
  ]
})

const router = useRouter()

// 轮播图数据
const carouselItems = reactive([
  {
    title: '发现本地生活',
    description: '找工作、买特产、游景点、找商家，一站式本地服务',
    imageUrl: 'https://picsum.photos/800/600?vgheight=400&width=800'
  }
])

// 快速导航数据
const quickNavs = shallowRef([
  {
    title: '找工作',
    description: '优质职位等你来',
    path: '/zhaopin',
    icon: Promotion,
    color: '#409EFF'
  },
  {
    id: 'merchants',
    title: '商家',
    path: '/shop',
    description: '优质服务商',
    icon: Shop,
    color: '#F56C6C'
  },
  {
    id: 'products',
    title: '特产',
    description: '地道家乡味',
    path: '/product',
    icon: ShoppingBag,
    color: '#67C23A'
  },
  {
    title: '景点',
    path: '/scene',
    description: '发现美丽风景',
    icon: Camera,
    color: '#E6A23C'
  }
])

// 工作数据
const jobs = reactive([
  {
    id: 1,
    title: '前端开发工程师',
    company: '科技有限公司',
    phoneNumbers: '',
    salaryRange: '8K-15K',
    location: '市中心',
    requirements: '',

    minSalary: 0,
    maxSalary: 10,
    tagsJson: '[]',
    description: '负责前端页面开发，要求熟悉Vue.js'
  }
])

const formatSalary = (num: number) => {
  // 处理数值为0的情况
  if (num === 0) return '0'

  // 大于等于1000时，转换为k单位
  if (num >= 1000) {
    // 除以1000，保留1位小数（如2500 → 2.5）
    const value = (num / 1000).toFixed(1)
    // 去除末尾的.0（如3000 → 3k 而非3.0k）
    return value.endsWith('.0') ? `${parseInt(value, 10)}k` : `${value}k`
  }
  // 小于1000时直接返回原数值
  return num.toString()
}

// 特产数据
const products = reactive([
  {
    id: 1,
    name: '特色蜂蜜',
    price: 68,
    rating: 4.8,
    image: 'https://picsum.photos/200/300?vidth=200'
  }
])

// 景点数据
const attractions = reactive([
  {
    id: 1,
    name: '古城风景区',
    location: '老城区',
    rating: 4.8,
    description: '历史悠久的古城，保存完好的明清建筑',
    image: 'https://picsum.photos/200/300?tth=300'
  }
])

// 商家数据
const merchants = reactive([
  {
    id: 1,
    name: '老字号餐厅',
    category: '餐饮美食',
    rating: 4.8,
    address: '美食街88号',
    image: 'https://picsum.photos/200/300?dth=400'
  },
  {
    id: 2,
    name: '精品咖啡店',
    category: '休闲娱乐',
    rating: 4.7,
    address: '商业中心2楼',
    image: 'https://picsum.photos/200/300?idth=500'
  },
  {
    id: 3,
    name: '健身中心',
    category: '运动健身',
    rating: 4.6,
    address: '体育馆旁',
    image: 'https://picsum.photos/200/300?th=600'
  },
  {
    id: 4,
    name: '美容美发',
    category: '生活服务',
    rating: 4.5,
    address: '时尚街区',
    image: 'https://picsum.photos/200/300?th=700'
  }
])
// 获取轮播图数据
const fetchBannerList = () => {
  http.fetchData().then((res) => {
    let { code, result, message } = res.data
    if (code === 200) {
      carouselItems.splice(0, carouselItems.length, ...result.items)
    }
  })
}
// 获取招聘数据
const fetchZhaopinList = () => {
  jobs.splice(0x0, jobs.length)
  zhaopinList({ page: 1, pageSize: 6 }).then((res) => {
    let { code, result, message } = res.data
    if (code !== 200) {
      return
    }
    for (const item of result.items) {
      if (item.phoneNumbers) {
        item.phoneNumbers = JSON.parse(item.phoneNumbers)
          .map((t: any) => `${t.name ? t.name + ':' : ''}${t.phone.substring(0x00, 0x03)}...`)
          .join(' , ')
        // console.log(item.phoneNumbers)
      }
      jobs.push(item)
    }
  })
}
// 获取特产数据
const fetchProductList = () => {
  productList({ page: 1, pageSize: 8 }).then((res) => {
    let { code, result, message } = res.data
    if (code === 200) {
      let list = result.items
      products.splice(0, products.length)
      for (let item of list) {
        let imgs = []
        if (item.imageUrls) {
          imgs = JSON.parse(item.imageUrls)
        }
        let prod = {
          id: item.id,
          name: item.name,
          price: item.price,
          rating: item.rating || 5,
          image: imgs.length > 0 ? imgs[0] : 'https://picsum.photos/200/300?vidth=200'
        }
        products.push(prod)
      }
      // console.log(products)
    }
  })
}
// 获取景点数据
const fetchSceneList = () => {
  sceneList({ page: 1, pageSize: 6 }).then((res) => {
    let { code, result, message } = res.data
    if (code === 200) {
      let list = result.items
      attractions.splice(0, attractions.length)
      for (let item of list) {
        let imgs = []
        if (item.imageUrls) {
          imgs = JSON.parse(item.imageUrls)
        }
        let attr = {
          id: item.id,
          name: item.name,
          location: item.location,
          rating: item.rating || 5,
          description: item.description,
          image: imgs.length > 0 ? imgs[0] : 'https://picsum.photos/200/300?tth=300'
        }
        attractions.push(attr)
      }
      // console.log(attractions)
    }
  })
}

// 获取商家数据
const fetchShopList = () => {
  shopList({ page: 1, pageSize: 8 }).then((res) => {
    let { code, result, message } = res.data
    if (code === 200) {
      let list = result.items
      merchants.splice(0, merchants.length)
      for (let item of list) {
        let imgs = []
        if (item.imageUrls) {
          imgs = JSON.parse(item.imageUrls)
        }
        let merch = {
          id: item.id,
          name: item.name,
          category: item.category,
          rating: item.rating || 5,
          address: item.address,
          image: imgs.length > 0 ? imgs[0] : 'https://picsum.photos/200/300?dth=400'
        }
        merchants.push(merch)
      }
      // console.log(merchants)
    }
  })
}

onMounted(() => {
  fetchBannerList()
  fetchZhaopinList()
  fetchProductList()
  fetchSceneList()
  fetchShopList()
})

// 方法
const handleNavClick = (path: string) => {
  // console.log(`Navigating to ${path}`)
  router.push(path)
}
</script>

<style scoped>
.main-content {
  padding: 0;
  max-width: var(--page-max-width);
  margin: 0px auto;
}

.hero-carousel {
  margin-bottom: 40px;
}

.carousel-item {
  height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.carousel-content {
  text-align: center;
  color: white;
  z-index: 1;
  position: relative;
}

.carousel-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.carousel-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.quick-nav {
  margin: 40px 20px;
}

.nav-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.nav-card:hover {
  transform: translateY(-5px);
}

.nav-item {
  text-align: center;
  padding: 20px;
}

.nav-item h3 {
  margin: 15px 0 10px;
  color: #333;
}

.nav-item p {
  color: #666;
  margin: 0;
}

.section-card {
  margin: 0px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header h2 {
  margin: 0;
  color: #333;
}

.job-card,
.product-card,
.attraction-card,
.merchant-card {
  cursor: pointer;
  transition: transform 0.3s;
  margin: 5px;
}

.job-card:hover,
.product-card:hover,
.attraction-card:hover,
.merchant-card:hover {
  transform: translateY(-3px);
}

.job-info h4,
.product-info h4,
.attraction-info h4,
.merchant-info h4 {
  margin: 0 0 10px;
  color: #333;
}

.company,
.category,
.location {
  color: #666;
  margin: 5px 0;
}

.job-details {
  margin: 10px 0;
}

.job-details .el-tag {
  margin-right: 8px;
}

.job-desc,
.description {
  color: #666;
  font-size: 14px;
  margin: 10px 0;
}

.product-image,
.attraction-image,
.merchant-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.product-info,
.attraction-info,
.merchant-info {
  padding: 15px 0;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.buy-btn {
  width: 100%;
  margin-top: 10px;
}

.address {
  color: #666;
  font-size: 14px;
  margin: 10px 0;
}

.merchant-actions {
  margin-top: 15px;
}

.merchant-actions .el-button {
  margin-right: 8px;
}
</style>
